<template>
  <section>
    <div class="register">
      <router-link :to="{name:'account'}"><span class="glyphicon glyphicon-menu-left pull-left"></span></router-link>
      <span class="register-span">编辑地址</span>
      <span class="pull-right" @click="site">{{text ? '编辑': '完成'}}</span>
    </div>
    <p class="pp"></p>
    <!--根据添加地址信息创建地址-->
    <div class="div">
      <div class="div1" v-for="(item,index) in this.siteArr" @click="">
        <p class="div-p1">{{item.address_detail}}</p>
        <p class="div-p2">{{item.phone}}</p>
        <span class="glyphicon glyphicon-remove" v-if="!text" @click="deleteSite(index)"></span>
      </div>
    </div>
    <router-link :to="{name: 'increase'}" class="a">
      <p class="p">新增地址</p>
      <span class="glyphicon glyphicon-menu-right pull-right span"></span>
    </router-link>
  </section>
</template>

<script>
  import Vue from 'vue'
  export default {
    name: "site",
    data(){
      return {
        text:true,
        personID:JSON.parse(localStorage.getItem("personObj")).id,//获取用户id
        siteArr:[],
      }
    },
    methods:{
      site(){
        this.text = !this.text
      },
      // 删除所点地址信息
      deleteSite(i){
        Vue.axios.delete(`https://elm.cangdu.org/v1/users/${this.personID}/addresses/${this.siteArr[i].id}`).then(res=>{
          // console.log(res.data)
        })
        this.siteArr.splice(i,1)
      }
    },
    created(){
      //获取地址列表
      Vue.axios.get(`https://elm.cangdu.org/v1/users/${this.personID}/addresses`).then(res=>{
        this.siteArr = res.data.reverse()
        console.log(this.siteArr)
      })
    },
  }
</script>

<style scoped>
  .pull-right{
    text-align: center;
    margin: 0 0.1rem 0.1rem 0;
  }
  .pp{
    margin-top: 0.1rem;
  }
  .div1{
    font-size: 0.14rem;
    height: 100%;
    padding-left: 0.1rem;
    background-color: white;
    border: 0.01rem solid #DFDFDF;
  }
  .div>div:nth-child(1){
    background-color: #FFF8C3;
  }
  .div1>span{
    color: #999999;
    float: right;
    margin-top: -0.37rem;
    margin-right: 0.1rem;
  }
  .div-p1{
    padding-top: 0.1rem;
  }
  .div-p2{
    margin-top: -0.1rem;
  }
  .p{
    margin-top: 0.1rem;
    line-height: 0.5rem;
    width: 100%;
    height: 0.5rem;
    padding-left: 0.1rem;
    background-color: white;
    border-top: 0.01rem solid  #DFDFDF;
    border-bottom: 0.01rem solid  #DFDFDF;
    color: #333333;
  }
  .span{
    color: #DFDFDF;
    top: -0.4rem;
    right: 0rem;
  }
</style>
